<template>
  <div class="login">
    <div class="login-warpper">
      <div class='input-box mb20'>
        <div class='input-label'>账号</div>
        <div class="page-section">
          <div class="input-case">
            <input class="input" value=''  v-model="usernameInput" placeholder="请输入账号"/>
          </div>
        </div>
      </div>
      <div class='input-box mb20'>
        <div class='input-label'>密码</div>
        <div class="page-section">
          <div class="input-case">
            <input class="input" type='password'  minlength="6" v-model="pwdInput" placeholder="请输入密码"/>
          </div>
        </div>
      </div>
    </div>
    <div class='button-warpper'>
      <button type="primary"  class='login-button' @click='doLogin'>登录</button>
      <!--<button type="text" class='register-text' @click='registerToClick'>注册</button>-->
    </div>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'
  export default {
    created() {},
    mounted() {
      // console.log(host);
    },
    data() {
      return {
        usernameInput: '',
        pwdInput: ''
      };
    },
    components: {},
    methods: {
      ...mapActions('user', [
        'Login'
      ]),
      async doLogin() {
        console.log('进行action-login')
        const that = this
        const check_res = that.checkLoginParams()
        if (check_res) {
          wx.showLoading({
            title: '登录中...', //提示的内容,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: (res) => { console.log(res) }
          });
          // 获取微信账号登录时的code
          let resCode = wx.getStorageSync('resCode')
          const params = {
            'code': resCode,
            'username': that.usernameInput,
            'password': that.pwdInput
          }

          // that.Login(params).then((res) => {
          //   wx.hideLoading();
          //   console.log('Login()', res.data)
          //   wx.switchTab({
          //     url: '/pages/index/main'
          //   });
          // }).catch((error) => { console.log('error', error) })
          await that.Login(params)
        }
      },
      // 账号 和 密码 校检
      checkLoginParams: function() {
        const that = this
        let {usernameInput, pwdInput} = that._data
        if (usernameInput === '') {
          wx.showToast({
            title: '请填写账号',
            icon: 'none',
            duration: 1500
          })
          return
        }
        if (pwdInput === '') {
          wx.showToast({
            title: '请填写密码',
            icon: 'none',
            duration: 1500
          })
          return
        }
        return true
      }
    },
    computed: {}
  };

</script>
<style lang='scss' scoped>
  @import "./style.scss";
  .login-warpper{
    padding-left: 60rpx;
    padding-right: 60rpx;
    margin-top:300rpx;
    height: auto;
    overflow: hidden;
    margin-bottom: 40rpx;
  }
  /* input */
  .input-box{
    width: 100%;
    margin-left:auto;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*border-bottom: 2rpx solid #dedede;*/
  }
  .input-case{
    border-bottom: 2rpx solid #DCDCDC;
    padding:20rpx 30rpx;
  }
  .input-box > .input-label{
    margin-right: 10rpx;
    color: #333;
    font-size: 36rpx;
    line-height: 32rpx;
  }
  .input{
    color: #333;
    font-size: 32rpx;
    line-height: 32rpx;
    text-align: left;
  }
  .button-warpper{
    width: 80%;
    margin-left:auto;
    margin-right: auto;
    display: flex;
    /* justify-content: space-between; */
    align-items: flex-end;
  }
  .login-button{
    margin-top: 0;
    margin-bottom: 0;
    width:260rpx;
    height:80rpx;
    line-height:80rpx;
  }
  .register-text{
    display: inline-block;
    color: #00BFFF;
    margin-right: 28rpx;
  }
</style>
